<template>
    <div class="list">
        <el-scrollbar ref="scrollbarRef" always>
            <el-collapse v-model="state.activeCollapse" class="list_collapse">
                <el-collapse-item v-for="item in state.menuList" :name="item.value">
                    <template #title>
                        <div :ref="setComponentRef(item.value)">{{ item.label }}</div>
                    </template>
                    <BaseIndex v-if="item.value == 'base'" />
                    <ProxyIndex v-if="item.value == 'proxy'" />
                    <UserIndex v-if="item.value == 'user'" />
                    <HignIndex v-if="item.value == 'hign'" />
                </el-collapse-item>
            </el-collapse>
        </el-scrollbar>
    </div>
</template>

<script setup>

import BaseIndex from "./base/index.vue";
import ProxyIndex from "./proxy/index.vue";
import UserIndex from "./user/index.vue";
import HignIndex from "./hign/index.vue";

const { store, state } = inject('storejs')
const scrollbarRef = ref(null)
const setComponentRef = (value) => (el) => {
    let a
    state.menuList.forEach(item => {
        if (item.value == value) {
            a = item.ref
            item.ref = el
            
        }
    });
    return a

};
onMounted(() => {
    state.listScrollbar = scrollbarRef.value
})

</script>

<style lang="scss" scoped>
.list {
    flex: 1;
    height: calc(100vh - 170px);
}
</style>

<style>
.list_collapse,
.list_collapse .el-collapse-item__wrap,
.list_collapse .el-collapse-item__header {
    border: none !important;
}

.list_collapse {
    padding-right: 16px;
}

.list_collapse .el-collapse-item__header {
    background: #f2f3f5;
    border-radius: 4px;
    color: #1d2129;
    font-weight: 600;
    margin-bottom: 8px;
    height: 34px;
    padding: 0 8px 0 16px;
}

.list_collapse .el-collapse-item__content{
    padding-bottom: 8px;
}
</style>